<template>
	<n-flex align='center'>
		<!--菜单栏伸缩开关-->
		<n-button strong aria-label='triggerCollapse' @click='menusStore.triggerCollapseStatus'>
			<ClassIcon :icon-class='collapseClassName'/>
		</n-button>
		<!--暗黑模式开关-->
		<n-button strong @click='commonStore.triggerTheme'>
			<SvgIcon icon-type='iconfont5' :icon-class='themeClassName'/>
		</n-button>
	</n-flex>
</template>
<script lang='ts' setup>
import { computed, defineAsyncComponent } from 'vue';
import { useCommonStore } from '@/config/pinia/common.store.ts';
import { useMenusStore } from '@/config/pinia/menus.store.ts';
const SvgIcon = defineAsyncComponent(() => import('@/components/customComponents/icon/SvgIcon.vue'));
const ClassIcon = defineAsyncComponent(() => import('@/components/customComponents/icon/ClassIcon.vue'));
const commonStore = useCommonStore();
const menusStore = useMenusStore();
let collapseClassName = computed(() => {
	if (menusStore.getIsCollapsed) {
		return 'fa fa-chevron-right';
	} else {
		return 'fa fa-chevron-left';
	}
});
let themeClassName = computed(() => {
	switch (commonStore.theme) {
		case 'dark':
			return 'iconfont5-SunnyOutline';
		case 'light':
			return 'iconfont5-MoonOutline';
		default:
			return 'iconfont5-MoonOutline';
	}
});
</script>